<template>
  <div class="danye">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户评价管理</el-breadcrumb-item>
    </el-breadcrumb>

    <div class="mar-top">
      <el-input
        v-model="searchuser"
        placeholder="按用户搜索"
        style="width: 200px; margin-bottom: 10px; margin-right: 1rem"
        clearable
        @clear="clearOn"
      ></el-input>
      <el-input
        v-model="searchRating"
        placeholder="按评分搜索"
        style="width: 200px; margin-bottom: 10px; margin-right: 1rem"
        clearable
       @clear="clearOn"
      ></el-input>
      <el-input
        v-model="searchwName"
        placeholder="按商品搜索"
        style="width: 200px; margin-bottom: 10px"
        clearable
        @clear="clearOn"
      ></el-input>
      <el-button style="margin-left: 1rem;" type="primary" @click="handleSearch">搜索</el-button>
    </div>
    <el-table :data="wines" style="width: 100%" border>
      <el-table-column prop="reservation_id" label="单号"></el-table-column>
      <el-table-column prop="username" label="用户名"></el-table-column>
      <el-table-column prop="w_name" label="酒品名"></el-table-column>
      <el-table-column prop="image_url" label="图片">
        <template slot-scope="scope">
          <el-image
            style="width: 50px; height: 50px"
            :src="scope.row.image_url"
            :preview-src-list="[scope.row.image_url]"
          >
          </el-image>
        </template>
      </el-table-column>
      <el-table-column prop="quantity" label="数量"></el-table-column>
      <el-table-column prop="price" label="价格"></el-table-column>
      <el-table-column prop="rating" label="评分"></el-table-column>
      <el-table-column prop="comment" label="评论"></el-table-column>

      <el-table-column label="操作" fixed="right" width="150">
        <template slot-scope="scope">
          <el-button size="mini" type="danger" @click="deleteWine(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="current"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    />
  </div>
</template>

<script>
import { list, evadelete } from "@/api/evaluate";
import { Message } from "element-ui";
export default {
  data() {
    return {
      wines: [], // 在这里初始化你的酒品数据
      dialogVisible: false,
      current: 1,
      size: 10,
      total: 0,
      searchuser: "",
      searchRating: "",
      searchwName: "",
      currentWine: {},
    };
  },

  created() {
    // 在组件创建时加载酒品数据
    this.loadWines();
  },
  methods: {
    handleSizeChange(val) {
      this.size = val;
    },
    handleCurrentChange(val) {
      this.current = val;
    },
    // 关闭对话框
    handleCloseDialog() {
      this.dialogVisible = false;
    },
    async deleteWine(row) {
      // 删除酒品的逻辑
      console.log("删除酒品", row);

      const res = await evadelete(row.review_id);
      if (res.code == 200) {
        Message(res.message || "删除成功");
        this.loadWines();
      } else {
        Message(res.message || "删除失败");
      }
    },
    handleSearch() {
      const param = {
        ...(this.searchuser && {
          name: this.searchuser,
        }),
        ...(this.searchRating && { rating: this.searchRating }),
        ...(this.searchwName && {
          wName: this.searchwName,
        }),
      };
      this.loadWines(param);
    },
    clearOn(){
      this.loadWines()
    },
    async loadWines(key) {
      // 在这里调用接口或者从后端获取酒品数据
      // 示例数据，实际应该从后端获取
      const param = {
        current: this.current,
        size: this.size,
      };
      const res = await list(param, key);
      this.wines = res.data.list.records;
      this.current = res.data.list.current;
      this.size = res.data.list.size;
      this.total = res.data.list.total;
    },
  },
};
</script>

<style scoped>
/* 在这里添加组件的样式 */
</style>
